<template>
  <div class="add-blog">
    <h2>编辑博客</h2>
    <!-- 当这里为false的时候这一整块都不会进行显示 -->
    <form v-if="!onSubmib">
      <label>博客标题</label>
      <input type="text" v-model="blog.title" />
      <div class="content">
        <label>博客内容</label>
        <textarea v-model="blog.content"></textarea>
      </div>
      <label>Vue.js</label>
      <input type="checkbox" value="Vue.js" v-model="blog.categories" />
      <label>Node.js</label>
      <input type="checkbox" value="Node.js" v-model="blog.categories" />
      <label>React.js</label>
      <input type="checkbox" value="React.js" v-model="blog.categories" />
      <label>Angular4</label>
      <input type="checkbox" value="Angular4" v-model="blog.categories" />
      <div class="autoer">
        <label>作者:</label>
        <select v-model="blog.autoer">
          <option v-for="(author,index) in blog.authors" :key="index">{{author}}</option>
        </select>
      </div>
      <!-- 这样就可以阻止刷新了 -->
      <button @click.prevent="post">编辑博客</button>
    </form>
    <div v-if="onSubmib">
      <h3>博客发布成功！</h3>
    </div>
    <hr />
    <div id="preview">
      <h3>博客总览</h3>
      <p>博客标题：{{blog.title}}</p>
      <p>博客内容：</p>

      <p>{{blog.content}}</p>
      <p>博客分类:</p>
      <ul>
        <li v-for="(category,index) in blog.categories" :key="index">{{category}}</li>
      </ul>
      <p>作者：{{blog.autoer}}</p>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  // https://jsonplaceholder.typicode.com/posts
  data() {
    return {
      id: this.$route.params.id,
      onSubmib: false,
      blog: {}
    };
  },
  methods: {
    fetchData() {
      //   console.log(this.id);
      axios.get("posts/" + this.id + "/.json").then(res => {
        //   console.log(res.body);
        this.blog = res.data;
      });
    },
    post() {
      axios.put("posts/" + this.id + "/.json", this.blog).then(data => {
        // console.log(data);
        this.onSubmib = !this.onSubmib;
      });
    }
  },
  created() {
    this.fetchData();
  }
};
</script>
<style lang="less" scope>
.add-blog {
  margin: 20px auto;
  max-width: 600px;
  padding: 20px;
}
.content {
  padding: 30px 0;
}
label {
  display: block;
}
</style>